<template>
  <div class="registered">
    <div class="top">
      <van-icon name="arrow-left" size="25" @click="onBack" />
    </div>
    <div class="content">
      <div class="title">用户注册</div>
      <div class="text">Hi，欢迎来到网上厨房，会做饭很酷~</div>
      <div class="form">
        <van-form @submit="onSubmit">
          <van-field
            v-model="phone"
            placeholder="请输入手机号"
            @input="onInput"
          />
          <van-field
            v-model="password"
            type="password"
            placeholder="请输入密码"
            @input="onInput"
          />
          <van-field
            v-model="confirmPassword"
            type="Password"
            placeholder="确认密码"
            @input="onInput"
          />
          <div style="margin: 16px">
            <van-button
              round
              block
              :disabled="disabled"
              color="#fbb705"
              type="info"
              native-type="submit"
              >注册</van-button
            >
          </div>
        </van-form>
      </div>
      <div class="l" @click="toLogin">已有账号，点击前往登录</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Registered",
  data() {
    return {
      phone: "",
      password: "",
      confirmPassword: "",
      disabled: true,
      portrait: require("../assets/portrait.png"),
      users: [],
    };
  },
  created() {
    if (localStorage.getItem("users")) {
      this.users = JSON.parse(localStorage.getItem("users"));
    }
  },
  methods: {
    onBack() {
      this.$router.go(-1);
    },
    onInput() {
      if (
        this.phone != "" &&
        this.password != "" &&
        this.confirmPassword != ""
      ) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
    onSubmit() {
      if (this.password != this.confirmPassword) {
        this.$notify({ type: "danger", message: "两次输入的密码不一致" });
        return;
      }
      if (this.users.length > 0) {
        this.users.forEach((ele) => {
          if (this.phone != ele.phone) {
            let user = {
              phone: this.phone,
              password: this.password,
              isLogin: false,
              Focus: [],
              nickName: "某某某",
              portrait: this.portrait,
              gender: 1,
              location: "",
              signature: "",
            };
            this.users.push(user);
            localStorage.setItem("users", JSON.stringify(this.users));
            this.$notify({
              type: "success",
              message: "注册成功，2秒后自动返回登录页面",
            });
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 2000);
          } else if (this.phone == ele.phone) {
            this.$notify({ type: "primary", message: "该账号被注册" });
          }
        });
      } else {
        let user = {
          phone: this.phone,
          password: this.password,
          isLogin: false,
          Focus: [],
          nickName: "某某某",
          portrait: this.portrait,
          gender: 1,
          location: "",
          signature: "",
        };
        this.users.push(user);
        localStorage.setItem("users", JSON.stringify(this.users));
        this.$notify({
          type: "success",
          message: "注册成功，2秒后自动返回登录页面",
        });
        setTimeout(() => {
          this.$router.push({ name: "Login" });
        }, 2000);
      }
    },
    toLogin() {
      this.$router.push({ name: "Login" });
    },
  },
};
</script>

<style lang="scss" scoped>
.registered {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  .top {
    width: 100%;
    padding: 40px 10px 10px;
    background-color: #fbb705;
  }
  .content {
    padding: 30px;
    .title {
      font-size: 25px;
    }
    .text {
      color: #999;
      margin-top: 10px;
    }
    .form {
      margin-top: 40px;
      .van-cell {
        font-size: 16px;
        padding: 15px 0;
      }
    }
    .l {
      width: 100%;
      text-align: center;
    }
  }
}
</style>